<template>
  <div>
    <h1>Radio组件使用</h1>
    <!--组件创建 属性-->
<!--    <el-radio name="sex" disabled v-model="label" label="男">男</el-radio>-->
<!--    <el-radio name="sex" size="mini" border v-model="label" label="女">女</el-radio>-->
<!--    <el-radio name="sex" size="small" border v-model="label" label="女">女</el-radio>-->
<!--    <el-radio name="sex" size="medium" border v-model="label" label="女">女</el-radio>-->
    <el-radio name="sex" @change="radio_event" size="mini" border v-model="label" label="男">男</el-radio>
    <el-radio name="sex" @change="radio_event" size="mini" border v-model="label" label="女">女</el-radio>

    <!--创建单选按钮组-->
    <h2>单选按钮组</h2>
    <el-radio-group @change="radio_event_1" v-model="radio" size="medium">
      <!--解析成字符串的话不用加:-->
      <!--解析成数字的话需要加:-->
      <el-radio border label="3">备选项3</el-radio>
      <el-radio border label="6">备选项6</el-radio>
      <el-radio border label="9">备选项9</el-radio>
    </el-radio-group>

    <!--创建单选按钮组-->
    <h2>禁用单选按钮组</h2>
    <el-radio-group disabled v-model="radio" size="medium">
      <!--解析成字符串的话不用加:-->
      <!--解析成数字的话需要加:-->
      <el-radio border label="3">备选项3</el-radio>
      <el-radio border label="6">备选项6</el-radio>
      <el-radio border label="9">备选项9</el-radio>
    </el-radio-group>

    <!--创建单选按钮组-->
    <h2>按钮形式</h2>
    <el-radio-group @change="radio_event_1" fill="#808000" text-color="#FF00FF" v-model="radio" size="medium">
      <el-radio-button border label="3">备选项3</el-radio-button>
      <el-radio-button border label="6">备选项6</el-radio-button>
      <el-radio-button border label="9">备选项9</el-radio-button>
    </el-radio-group>

  </div>
</template>

<script>
export default {
  name: "Radio",
  data(){
    return{
      label:'男',
      radio:"3"
    }
  },
  methods:{
    //定义的事件处理函数
    radio_event(){
      // alert();
      console.log(this.label);
    },
    radio_event_1(){
      // alert();
      console.log(this.radio);
    }
  }
}
</script>

<style scoped>

</style>
